<template>
    <div class="content">
        <el-row :gutter="10">
            <el-col :span="6">
                <div class="bg courseBlue">
                    <div class="font">
                        <div>课程总数</div>
                        <div>{{entCount}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="bg ent">
                    <div class="font">
                        <div>企业总数</div>
                        <div>{{entCount}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="bg univ">
                    <div class="font">
                        <div>学校总数</div>
                        <div>{{univCount}}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="bg user">
                    <div class="font">
                        <div>用户总数</div>
                        <div>{{usersCount}}</div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { courses, ents, univs, users } from '#/Home/Home'
import { reactive, toRefs } from 'vue-demi'
import { ElMessage } from 'element-plus'
export default {
    name: 'TotalCount',
    setup() {
        const state = reactive({
            coursesCount: 0,
            entCount: 0,
            univCount: 0,
            usersCount: 0
        })
        const getCount = async () => {
            await courses().then(res => {
                if(res.data.ret === 0) {
                    state.coursesCount = res.data.data;
                } else {
                    return ElMessage.error('获取课程数量出错');
                }
            })
            await ents().then(res => {
                if(res.data.ret === 0) {
                    state.entCount = res.data.data;
                } else {
                    return ElMessage.error('获取企业数量出错');
                }
            })
            await univs().then(res => {
                if(res.data.ret === 0) {
                    state.univCount = res.data.data;
                } else {
                    return ElMessage.error('获取学校数量出错');
                }
            })
            await users().then(res => {
                if(res.data.ret === 0) {
                    state.usersCount = res.data.data;
                } else {
                    return ElMessage.error('获取用户数量出错');
                }
            })
        }
        getCount();
        return {
            ...toRefs(state),
            getCount
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    margin-bottom: 20px;
    .bg {
        width: 100%;
        height: 112px;
        display: flex;
        justify-content: space-between;
    }
    .courseBlue {
        background: url('../../assets/images/courseBlue.png') no-repeat;
        background-size:100% 100%;
    }
    .ent {
        background: url('../../assets/images/ent.png') no-repeat;
        background-size:100% 100%;
    }
    .univ {
        background: url('../../assets/images/univ.png') no-repeat;
        background-size:100% 100%;
    }
    .user {
        background: url('../../assets/images/user.png') no-repeat;
        background-size:100% 100%;
    }
    .font {
        color: white;
        font-size: 22px;
        padding-left: 30px;
        padding-top: 40px;
    }
}
</style>